<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>S.Anim Demo</title>
    <link href="/kissy/build/css/dpl/reset.css" rel="stylesheet"/>

    <script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/anim/config.js"></script>
    <script src="/kissy/tools/third-party/jquery.js"></script>
    <style>
        html,body {
            padding: 0;
            margin:0;
        }

        /*body{*/
            /*padding: 20px;*/
        /*}*/

        hr {
            height: 1px;
            border: none;
            color: #ccc;
            background-color: #ccc;
            margin: 10px -10px
        }

        button {
            margin-bottom: 5px;
            padding: 2px 5px
        }
    </style>
</head>
<body>
<div>
    <div id="t_absolute" style="height:100px;border:1px solid red;
    background:yellow;left:-100%;top:10%;position: absolute;margin-left:5%; ">
    </div>

    <div id="t" style="height:100px;border:1px solid red;
    background:yellow;left:-100%;top:10%;position: relative;margin-left:5%; ">
    </div>

    <button id="error_chrome">px</button>
    <button id="recommend">%</button>
    <button id="ok">%</button>


    <div style="position: relative;padding: 20px;
    height: 100px;
    border: 1px solid red;margin:5px;">
        <div id="t2"
             style="position: absolute;
        height: 20px;
        border: 1px solid #000000;
        padding: 14px;
        margin:4px;
        left:0%;
        top:5%;"></div>
    </div>
</div>
<script>
    KISSY.use("anim,node", function (S, Anim, Node) {
        var $ = Node.all,
                jt2 = jQuery('#t2'),
                t2 = $('#t2'),
                jt_absolute = jQuery('#t_absolute'),
                t_absolute = $('#t_absolute'),
                jt = jQuery('#t'),
                t = $('#t');

        S.log('jt_absolute');
        S.log('************************** kissy: ');
        S.log('top: ' + t_absolute.css('top'));
        S.log('left: ' + t_absolute.css('left'));

        S.log('************************** jquery: ');
        S.log('top: ' + jt_absolute.css('top'));
        S.log('left: ' + jt_absolute.css('left'));


        S.log('t2');
        S.log('************************** kissy: ');
        S.log('top: ' + t2.css('top'));
        S.log('left: ' + t2.css('left'));

        S.log('************************** jquery: ');
        S.log('top: ' + jt2.css('top'));
        S.log('left: ' + jt2.css('left'));

        S.log('t');
        S.log('************************** kissy: ');
        S.log('left: ' + t.css('left'));
        S.log('top: ' + t.css('top'));
        S.log('margin-left: ' + t.css('margin-left'));


        S.log('************************** jquery: ');
        S.log('left: ' + jt.css('left'));
        S.log('top: ' + jt.css('top'));
        S.log('margin-left: ' + jt.css('margin-left'));

        $('#ok').on('click', function () {
            new Anim('#t', {
                left: {
                    value: '0%'
                }
            }, {
                duration: 5
            }).run();
        });


        $('#error_chrome').on('click', function () {
            new Anim('#t', {
                left: 0
            }, {
                duration: 5
            }).run();
        });

        $('#recommend').on('click', function () {
            new Anim('#t', {
                left: '0%'
            }, {
                duration: 5
            }).run();
        });

    });
</script>
</body>
</html>
